<template>
    <transition name="hcj_drawerBox-fade">
        <div v-show="visible" class="hcj-drawer_box" @click.self="handleClos()">
            <div v-if="place == 'left'" :class="[{
            'hcj-drawer': visible,
            'hcj-quit': !visible
        }]">
                <div class="hcj-drawer_title">
                    <slot name="title">标题</slot>
                    <span style="float: right;font-size: 20px;cursor: pointer;" @click.self="handleClos()">×</span>
                </div>
                <div class="hcj-drawer_body">
                    <slot>您的内容</slot>
                </div>
            </div>
            <div v-if="place == 'right'" :class="[{
            'hcj-drawer-rt': visible,
            'hcj-quit-rt': !visible
        }]">
                <div class="hcj-drawer_title">
                    <slot name="title">标题</slot>
                    <span style="float: right;font-size: 20px;cursor: pointer;" @click.self="handleClos()">×</span>
                </div>
                <div class="hcj-drawer_body">
                    <slot>您的内容</slot>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        place: {
            typeof: String,
            default: 'left'
        }
    },
    data() {
        return {}
    },
    methods: {
        handleClos() {
            this.$emit('update:visible', false)
        }
    }
}
</script>

<style scoped>
.hcj-drawer_box
{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgba(0, 0, 0, 0.5);
}

/* left */
.hcj-drawer
{
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 100vh;
    background-color: white;
    animation: showDrawer 0.3s ease-in-out;
}

.hcj-quit
{
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 100vh;
    background-color: white;
    animation: showDrawerQuit 0.3s ease-in-out;
}

/* right */
.hcj-drawer-rt
{
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 100vh;
    background-color: white;
    animation: showDrawer_rt 0.3s ease-in-out;
}

.hcj-quit-rt
{
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 100vh;
    background-color: white;
    animation: showDrawerQuit_rt 0.3s ease-in-out;
}

.hcj-drawer_title
{
    height: 3%;
    padding: 15px;
    color: gray;
    /* background-color: pink; */
}

.hcj-drawer_body
{

    left: 0;
    right: 0;
    padding: 10px;
    overflow-x: hidden;
    background-color: white;
}

/* .hcj-drawer_footer
{
    padding: 15px;
    color: gray;
    background-color: pink;
} */

.hcj-drawer_body::-webkit-scrollbar
{
    width: 8px;
    height: 8px;
}

.hcj-drawer_body::-webkit-scrollbar-track
{}

.hcj-drawer_body::-webkit-scrollbar-thumb
{
    background-color: lightgray;
    border-radius: 10px;
    border: 1px solid white;
}

.hcj-drawer_body::-webkit-scrollbar-corner
{
    background-color: lightgray;
    border-radius: 10px;
    border: 1px solid white;
}

/* 过渡 */
.hcj_drawerBox-fade-enter-active
{
    animation: showDrawerBox .3s;
}

.hcj_drawerBox-fade-leave-active
{
    animation: showDrawerBox .3s reverse;
}

/* left */
@keyframes showDrawer
{
    0%
    {
        left: -100%;
    }

    100%
    {
        left: 0;
    }
}

@keyframes showDrawerQuit
{
    0%
    {
        left: 0;
    }

    100%
    {
        left: -100%;
    }
}

@keyframes showDrawerBox
{
    0%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
}

/* right */
@keyframes showDrawer_rt
{
    0%
    {
        right: -100%;
    }

    100%
    {
        right: 0;
    }
}

@keyframes showDrawerQuit_rt
{
    0%
    {
        right: 0;
    }

    100%
    {
        right: -100%;
    }
}
</style>